var vm = new Vue({
        el: '#contentContainer',
        data: {
            tableData: [],
            pageNum: 1,
            pageSize: 20,
            pageSizes: [20, 30, 40, 50],
            total: 0,
            resourceName: '',
            resourceId: null,
            multipleSelection: [],
            tableHeight: 400,
            treeData: [{id: 0, text: "资源"}],
            treeProps: {
                children: 'children',
                label: 'text'
            }
        },
        created: function () {
            this.loadTreeData();
            this.loadData();
        },
        mounted: function () {
            //动态计算table的高度
            var winHeight = $(window).height();
            var toolbarHeight = $('#toolbar').height() + 2 || 0;
            var paginationHeight = $('#pagination').height() || 0;
            var tableMargin = parseInt($('.dataTable').css('margin-top') || 0)
                + parseInt($('.dataTable').css('margin-bottom') || 0);
            var containerPadding = parseInt($('.contentContainer').css('padding-top') || 0)
                + parseInt($('.contentContainer').css('padding-bottom') || 0);

            this.tableHeight = winHeight - toolbarHeight - paginationHeight
                - tableMargin - containerPadding;

            var treeHeight = winHeight - toolbarHeight - tableMargin - containerPadding;
            $('.tree-layout').height(treeHeight);

            //改变树形控件滚动条样式
            $('.tree').slimscroll({
                height: $(".tree-layout").height(),
                opacity: 0
            });
        },
        methods: {
            loadData: function () {
                var $this = this;

                Common.getJson('/sys/resource/getResourceList',
                    {
                        pageNum: $this.pageNum, pageSize: $this.pageSize,
                        resourceName: $this.resourceName,
                        resourceId: $this.resourceId
                    },
                    function (response) {
                        if (!response || response.status != 200)
                            return;

                        var result = response.result;
                        $this.tableData = result.list;
                        $this.pageNum = result.pageNum;
                        $this.pageSize = result.pageSize;
                        $this.total = result.total;

                        if ($this.resourceId != null && $this.resourceId > 0) {
                            $(".dataTable tr input[type='checkbox']").click();
                        }
                    });
            },
            loadTreeData: function () {
                var $this = this;
                Common.getJson('/sys/role/getResourceTreeList', {},
                    function (response) {
                        if (!response || response.status != 200)
                            return;

                        var data = response.result;

                        // 属性配置信息
                        var attributes = {
                            // 标识字段名
                            keyField: 'resourceId',
                            // 上级标识字段名
                            parentKeyField: 'parentId',
                            // 文本字段名
                            textField: 'name',
                            // 根节点标识
                            rootParentId: 0
                        };

                        var root = $this.treeData[0];
                        root.children = Common.convertTreeData(data, attributes);
                        $this.treeData = [root];
                    });
            },
            onSelectionChange: function (val) {
                this.multipleSelection = val;
            },
            onSizeChange: function (size) {
                this.pageNum = 1;
                this.pageSize = size;
                this.loadData();
            },
            onCurrentChange: function (currentPage) {
                if (this.pageNum === currentPage)
                    return;

                this.pageNum = currentPage;
                this.loadData();
            },
            onSearch: function () {
                this.resourceId = null;
                this.pageNum = 1;
                this.loadData();
            },
            onAdd: function () {
                window.location.href = '/sys/resource/add';
            },
            onEdit: function () {
                if (this.multipleSelection.length == 0) {
                    this.$message({
                        type: 'warning',
                        message: '请选择要编辑的数据'
                    });

                    return;
                }

                if (this.multipleSelection.length > 1) {
                    this.$message({
                        type: 'warning',
                        message: '请只选择一条数据'
                    });

                    return;
                }

                var resourceId = this.multipleSelection[0].resourceId;
                window.location.href = '/sys/resource/edit?resourceId=' + resourceId;
            },
            onDelete: function () {
                if (this.multipleSelection.length == 0) {
                    this.$message({
                        type: 'warning',
                        message: '请选择要删除的数据'
                    });

                    return;
                }

                var $this = this;
                this.$confirm('此操作将永久删除资源及其子资源数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    callback: function (action, instance) {
                        if (action == 'cancel')
                            return;

                        var resourceIdList = [];
                        $.each($this.multipleSelection, function (index, item) {
                            resourceIdList.push(item.resourceId);
                        });

                        Common.postJson('/sys/resource/delete', {resourceIdList: resourceIdList},
                            function (response) {
                                if (!response)
                                    return;

                                //删除成功
                                if (response.status == 200 && response.result.success) {
                                    $this.$message({
                                        type: 'success',
                                        message: '删除成功'
                                    });

                                    $this.pageNum = 1;
                                    $this.resourceId = null;
                                    $this.resourceName = '';
                                    $this.loadData();
                                    $this.loadTreeData();
                                }
                                else {
                                    var errMsg = response.status == 200 ? response.result.errMsg : response.msg;

                                    $this.$message({
                                        type: 'error',
                                        message: errMsg
                                    });
                                }
                            });

                    }
                });
            },
            onTreeNodeClick: function (data) {
                if (data.id == 0) {
                    this.resourceId = null;
                } else {
                    this.resourceId = data.id;
                }

                this.resourceName = '';
                this.pageNum = 1;
                this.loadData();
            }
        }
    })
;